<div [hidden]="hideLoader" class="filter filter_loader">
    <div class="filter_block {{cssBlockClass}}">
        <i class="fa fa-circle-o-notch fa-spin"></i>
    </div>
</div>
<div [hidden]="!hideLoader"  class="filter" (mouseleave)="mouseLeaveFilter()" (mouseenter)="mouseEnterFilter()"  (keyup)="onKeyUp($event)">
    <div class="filter_template_function">
        <span class="clearform_button" *ngIf="showFilterButtons && !hideClearButtons">
            <ul class="buttons">
                <li i18n-title="@@title.filter-generator.clear_current_filters" title="Clear current filters" (click)="$event.preventDefault();clear()"><ng-container i18n="@@Clear">Clear</ng-container> <span class="glyphicon glyphicon-remove"></span></li>
            </ul>
        </span>
        <div class="template_list" *ngIf="showFilterTemplateList">
            <span class="loader" *ngIf="!filterTemplates">
                <i class="fa fa-circle-o-notch fa-spin"></i>
            </span>
            <ul class="templates not_found" *ngIf="noFilterFound">
                <li i18n="@@no_filter_template_found">No filter-templates found!</li>
            </ul>
            <ul class="templates" *ngIf="filterTemplates">
                <li *ngFor="let filter of filterTemplates"><a  title="{{filter.dcmuiFilterTemplateDescription}}" (click)="$event.preventDefault();openTemplateFilter(filter)">{{filter.dcmuiFilterTemplateGroupName}}</a><span class="glyphicon glyphicon-remove" (click)="removeFilterTemplate(filter)"></span></li>
            </ul>
        </div>
    </div>
    <ng-container *ngFor="let filter of schema;trackBy:trackByFn">
        <div class="filter_block {{cssBlockClass}}" (click)="inFilterClicked()">
            <div *ngFor="let line of filter;trackBy:trackByFn" [ngClass]="{'line':((line && line[0] && (!line[0].showIf || line[0].showIf(model)) && ((line[0].dependingOn && model[line[0].dependingOn]) || !line[0].dependingOn))||(line && line[1] && (!line[1].showIf || line[1].showIf(model)) && ((line[1].dependingOn && model[line[1].dependingOn]) || !line[1].dependingOn)))}" [ngSwitch]="filter.type">
              <ng-container *ngFor="let index of [0,1]">
                <ng-container *ngIf="line && line[index] && (!line[index].showIf || line[index].showIf(model)) && ((line[index].dependingOn && model[line[index].dependingOn]) || !line[index].dependingOn)" [ngSwitch]="line[index].tag">
                    <div class="input_group_dropdown" *ngSwitchCase="'combined'">
                        <input type="{{line[index].firstField.type}}" min="{{line[index].firstField.min}}" [(ngModel)]="model[line[index].firstField.filterKey]" placeholder="{{line[index].firstField.placeholder}}"/>
                        <mat-select [(ngModel)]="model[line[index].secondField.filterKey]">
                            <mat-option *ngIf="line[index].secondField.showStar" value="">*</mat-option>
                            <mat-option *ngFor="let option of line[index].secondField.options" value="{{option.value}}" title="{{option.description || option.title}}"  [innerHtml]="option.label || option.text"></mat-option>
                        </mat-select>
                    </div>
                  <label *ngSwitchCase="'label'">{{line[index].text}}:</label>
                  <modality *ngSwitchCase="'modality'" [model]="model[line[index].filterKey]" [ngStyle]="line[index].style" (modelChange)="model[line[index].filterKey] = $event;filterChange($event)"></modality>
                  <ng-container *ngIf="line[index].filterKey || line[index].tag === 'code-selector'">
                    <div class="input_group_dropdown" *ngSwitchCase="'size_range_picker'">
                        <size-range-picker ngDefaultControl (modelChange)="model[line[index].filterKey] = $event;filterChange($event)" [(model)]="model[line[index].filterKey]"></size-range-picker>
                    </div>
                      <ng-container  *ngSwitchCase="'input'">
                        <input
                                [disabled]="line[index].disabled"
                                (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)"
                                [(ngModel)]="model[line[index].filterKey]"
                                type="text"
                                [ngStyle]="line[index].style"
                                title="{{line[index]?.description}}"
                                placeholder="{{line[index]?.placeholder}}"
                                min="{{line[index]?.min}}"
                                max="{{line[index]?.max}}"
                                *ngIf="line[index].type === 'text' || line[index].type != 'number'"
                        >
                          <input
                                [disabled]="line[index].disabled"
                                (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)"
                                [(ngModel)]="model[line[index].filterKey]"
                                type="number"
                                [ngStyle]="line[index].style"
                                title="{{line[index]?.description}}"
                                placeholder="{{line[index]?.placeholder}}"
                                min="{{line[index]?.min}}"
                                max="{{line[index]?.max}}"
                                *ngIf="line[index].type === 'number'"

                        >
                      </ng-container>
                    <div class="filter_checkbox" *ngSwitchCase="'checkbox'" title="{{line[index]?.description}}" [ngClass]="{'active':model[line[index].filterKey]}">
                      <input [disabled]="line[index].disabled" type="checkbox" (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)" [(ngModel)]="model[line[index].filterKey]"  title="{{line[index]?.description}}" > <span [ngStyle]="line[index].style" >{{line[index].text}}</span>
                    </div>
                    <span *ngIf="line[index].type === 'checkbox'">{{line[index].text}}</span>
                    <!--<p-multiSelect [disabled]="line[index].disabled" (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)"  [styleClass]="'multi_select'" [maxSelectedLabels]="line[index].maxSelectedLabels || 1" *ngSwitchCase="'multi-select'" [options]="line[index].options" [(ngModel)]="model[line[index].filterKey]" [defaultLabel]="line[index]?.placeholder"></p-multiSelect>-->
                    <j4care-select [(model)]="model[line[index].filterKey]" [ngStyle]="line[index].style" *ngSwitchCase="'html-multi-select'" [placeholder]="line[index]?.placeholder" [ngClass]="line[index].cssClass" [multiSelectMode]="true" [maxSelectedValueShown]="line[index].maxSelectedValueShown || 1" [showSearchField]="line[index].showSearchField">
                        <j4care-option *ngFor="let option of line[index].options"  [value]="option.value" title="{{option.description || option.title}}" [htmlLabel]="option.htmlLabel || option.label || option.text"></j4care-option>
                    </j4care-select>
<!--                    <j4care-select [(model)]="model[line[index].filterKey]" [ngStyle]="line[index].style" *ngSwitchCase="'html-select'" [placeholder]="line[index]?.placeholder" [ngClass]="line[index].cssClass" (modelChange)="filterChange($event)">
                      <j4care-option *ngIf="line[index].showStar" [value]="''">*</j4care-option>
                      <j4care-option *ngFor="let option of line[index].options"  [value]="option.value" title="{{option.description || option.title}}" [htmlLabel]="option.htmlLabel || option.label || option.text"></j4care-option>
                    </j4care-select>-->
                      <dcm-drop-down
                              [(model)]="model[line[index].filterKey]"
                              [ngStyle]="line[index].style"
                              *ngSwitchCase="'editable-select'"
                              [placeholder]="line[index]?.placeholder"
                              [ngClass]="line[index].cssClass"
                              [options]="line[index].options"
                              [optionsTree]="line[index].optionsTree"
                              [min]="line[index].min"
                              [max]="line[index].max"
                              [editable]="true"
                              [showSearchField]="line[index].showSearchField"
                              [multiSelectMode]="false"
                              (modelChange)="filterChange($event)"
                              [showStar]="line[index].showStar"
                      ></dcm-drop-down>
                      <dcm-drop-down
                              [(model)]="model[line[index].filterKey]"
                              [ngStyle]="line[index].style"
                              *ngSwitchCase="'multi-select'"
                              [placeholder]="line[index]?.placeholder"
                              [ngClass]="line[index].cssClass"
                              [options]="line[index].options"
                              [optionsTree]="line[index].optionsTree"
                              [showSearchField]="line[index].showSearchField"
                              [multiSelectMode]="true"
                              (modelChange)="filterChange($event)"
                              [showStar]="line[index].showStar"
                      ></dcm-drop-down>
                      <dcm-drop-down
                              [(model)]="model[line[index].filterKey]"
                              [ngStyle]="line[index].style"
                              *ngSwitchCase="'html-select'"
                              [placeholder]="line[index]?.placeholder"
                              [ngClass]="line[index].cssClass"
                              [options]="line[index].options"
                              [optionsTree]="line[index].optionsTree"
                              [showSearchField]="line[index].showSearchField"
                              (modelChange)="filterChange($event)"
                              [multiSelectMode]="false"
                              [showStar]="line[index].showStar"
                      ></dcm-drop-down>
                    <mat-select [disabled]="line[index].disabled" [ngStyle]="line[index].style" (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)" [(ngModel)]="model[line[index].filterKey]" *ngSwitchCase="'select'" placeholder="{{line[index]?.placeholder}}" title="{{line[index]?.description}}">
                      <mat-option *ngIf="line[index].showStar" value="">*</mat-option>
                      <mat-option *ngFor="let option of line[index].options" [value]="option.value" title="{{option.description || option.title}}" [innerHtml]="option.label || option.text"></mat-option>
                    </mat-select>
                    <mat-radio-group [disabled]="line[index].disabled" [ngStyle]="line[index].style" (ngModelChange)="model[line[index].filterKey] = $event;filterChange($event)" [(ngModel)]="model[line[index].filterKey]" *ngSwitchCase="'radio'">
                        <mat-radio-button *ngFor="let option of line[index].options" [value]="option.value" title="{{option.description}}">{{option.text}}</mat-radio-button>
                    </mat-radio-group>
<!--                    <p-calendar
                            [disabled]="line[index].disabled"
                            [ngStyle]="line[index].style"
                            (ngModelChange)="model[line[index].filterKey] = $event.value.format('YYYYMMDD');filterChange($event)"
                            [(ngModel)]="model[line[index].filterKey]"
                            *ngSwitchCase="'p-calendar'"
                            dataType="string"
                            dateFormat="yymmdd"
                            monthNavigator="true"
                            yearNavigator="true"
                            yearRange="1800:2100"
                            placeholder="{{line[index].description || line[index].placeholder}}"
                            title="{{line[index]?.description}}"
                    ></p-calendar>-->
<!--                      <mat-form-field
                              class="material_calendar"
                              *ngSwitchCase="'p-calendar'"
                              [floatLabel]="'never'"
                              [ngStyle]="line[index].style"

                      >
                          <input matInput
                                 [disabled]="line[index].disabled"
                                 [matDatepicker]="picker"
                                 placeholder="{{line[index].description || line[index].placeholder}}"
                                 title="{{line[index]?.description}}"
                                 [(ngModel)]="model[line[index].filterKey]"
                          >
                          <mat-datepicker-toggle matSuffix [for]="picker">
                              <mat-icon matDatepickerToggleIcon>
                                  <span class="glyphicon glyphicon-calendar"></span>
                              </mat-icon>
                          </mat-datepicker-toggle>
                          <mat-datepicker #picker></mat-datepicker>
                      </mat-form-field>-->
                      <range-picker
                              [ngStyle]="line[index].style"
                              *ngSwitchCase="'p-calendar'"
                              [onlyDate]="line[index].onlyDate"
                              [model]="model[line[index]?.filterKey]"
                              (modelChange)="dateChanged(line[index]?.filterKey, $event)"
                              [datePickerMode]="true"
                              placeholder="{{line[index]?.description || line[index]?.placeholder}}"
                              dateFormat="YYYYMMDD"
                              title="{{line[index]?.description}}"
                      ></range-picker>
                    <range-picker
                            [ngStyle]="line[index].style"
                            *ngSwitchCase="'range-picker'"
                            [onlyDate]="line[index].onlyDate"
                            [model]="model[line[index]?.filterKey]"
                            (modelChange)="dateChanged(line[index]?.filterKey, $event)"
                            mode="range"
                            placeholder="{{line[index]?.description || line[index]?.placeholder}}"
                            title="{{line[index]?.description}}"
                    ></range-picker>
                    <range-picker
                            [ngStyle]="line[index].style"
                            *ngSwitchCase="'range-picker-limit'"
                            [onlyDate]="line[index].onlyDate"
                            [model]="model[line[index]?.filterKey]"
                            (modelChange)="dateChanged(line[index]?.filterKey, $event)"
                            mode="range"
                            placeholder="{{line[index]?.description || line[index]?.placeholder}}"
                            title="{{line[index]?.description}}"
                            dateRange="true"
                            (splitDateRangeChanged)="splitDateRangeChanged($event);"
                    ></range-picker>
                    <range-picker
                            [ngStyle]="line[index].style"
                            *ngSwitchCase="'range-picker-time'"
                            [onlyDate]="line[index].onlyDate"
                            [model]="model[line[index]?.filterKey]"
                            (modelChange)="dateChanged(line[index]?.filterKey, $event)"
                            mode="range"
                            placeholder="{{line[index]?.description || line[index]?.placeholder}}"
                            title="{{line[index]?.description}}"
                            onlyTime="true"
                            (splitDateRangeChanged)="splitDateRangeChanged($event);"
                    ></range-picker>
                    <range-picker
                          [ngStyle]="line[index].style"
                          *ngSwitchCase="'single-date-time-picker'"
                          [onlyDate]="line[index].onlyDate"
                          [model]="model[line[index]?.filterKey]"
                          (modelChange)="dateChanged(line[index]?.filterKey, $event)"
                          placeholder="{{line[index]?.description || line[index]?.placeholder}}"
                          dateFormat="YYYYMMDD"
                          onlySingleMode="true"
                          defaultTime="00:00:00"
                          mode="single"
                          title="{{line[index]?.description}}"
                    ></range-picker>
                      <input
                          type="file"
                          *ngSwitchCase="'file'"
                          (change)="model[line[index]?.filterKey] = $event.target.files"
                      >
                    <code-selector *ngSwitchCase="'code-selector'"
                        [title]="line[index]?.description"
                        [codes]="line[index]?.codes"
                        placeholder="{{line[index]?.placeholder || line[index]?.description}}"
                        (modelChange)="codeChanged(line[index]?.codes, $event)"
                    ></code-selector>
                  </ng-container>
                    <div *ngSwitchCase="'dummy'"></div>
                    <label *ngSwitchCase="'label_large'" class="label_large">{{line[index].text}}</label>
                    <button (click)="submitEmit(line[index].id)" class="btn-default submit" *ngSwitchCase="'button'" title="{{line[index].description}}">
                        <span *ngIf="line[index].showRefreshIcon" class="glyphicon glyphicon-refresh"></span>
                        <span *ngIf="line[index].showDynamicLoader" class="fa fa-circle-o-notch fa-spin dashboard_loader"></span>
                        {{line[index].text}}</button>
                </ng-container>
              </ng-container>
            </div>
        </div>
    </ng-container>
</div>